<template>
  <div class="shell">
    <div class="analyse-shell">
      <div class="analyse-shell-left">
        <div class="analyse-shell-left-top">
          <!-- 选择框、图片、信息列表 -->
          <h3 class="choose">选择游戏</h3>
          <div class="select-con">
            <el-select v-model="selectedGame.gid" @change="handleGameChange">
              <el-option-group :label="'已上架 (' + onShelfGamesLength + ')'">
                <el-option v-for="game in onShelfGames" :key="game.gid" :label="game.gname" :value="game.gid" />
              </el-option-group>
              <el-option-group :label="'已下架 (' + offShelfGamesLength + ')'">
                <el-option v-for="game in offShelfGames" :key="game.gid" :label="game.gname" :value="game.gid" />
              </el-option-group>
            </el-select>
          </div>

          <div class="img-container">
            <img class="photo" :src="selectedGame.photo" alt="" />
          </div>

          <ul class="info">
            <li class="info-item">
              <h4 class="info-item-content">发行日期:&nbsp;{{ selectedGame.onsaledate }}</h4>
            </li>
            <li class="info-item">
              <h4 class="info-item-content">发行天数:&nbsp;{{ selectedGame.day }}&nbsp;天</h4>
            </li>
            <li class="info-item">
              <h4 class="info-item-content">总购买量:&nbsp;{{ selectedGame.totalPur || '暂无' }}</h4>
            </li>
          </ul>
        </div>

        <!-- 饼状图组件 -->
        <div class="analyse-shell-left-bottom">
          <EPieChart :title="'用户评价'" :data="processCommentData(selectedGame.comments)" />
        </div>
      </div>

      <div class="analyse-shell-right">
        <!-- 右侧内容预留 -->
        <div class="analyse-shell-right-top">
          <EBarChart :title="'购买量与下载量'" :data="processPurchaseDownloadData(selectedGame.purchaseDownload)" />
        </div>

        <div class="analyse-shell-right-bottom">
          <ELineChart :title="'用户活跃度与评论数'" :data="processActiveData(selectedGame.active)" />
        </div>
      </div>
      <div style="height: 100px"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, watch, nextTick, computed } from 'vue';
import * as echarts from 'echarts';
import { myAxios } from '@/axios/index';
import EPieChart from '@/components/EPieChart.vue';// 引入饼状图组件
import EBarChart from '@/components/EBarChart.vue';//引入柱状图组件
import ELineChart from '@/components/ELineChart.vue';//引入折线图组件

const gameList = ref([]);
const onShelfGames = ref([]);
const onShelfGamesLength = ref(0);
const offShelfGames = ref([]);
const offShelfGamesLength = ref(0);
const selectedGame = reactive({
  gid: '',
  gname: '',
  status: '',
  photo: '',
  onsaledate: '',
  day: '',
  totalPur: '',
  comments: [], // 评论数据
  purchaseDownload: [],//购买量与下载量数据
  active: [],//用户活跃度与评论数
});

// 数据处理：将评论数据转换为组件所需格式
const processCommentData = (comments) => {
  if (!Array.isArray(comments) || comments.length === 0) return [];
  return comments.map(item => ({
    name: `${item.rating}星`,
    value: item.ratNum
  }));
};

//数据处理：将购买量与下载量数据转换为组件所需格式
const processPurchaseDownloadData = (data) => {
  if (!Array.isArray(data) || data.length === 0) return [];
  return data.map(item => ({
    name: item.month,
    value1: item.downloadNum,
    value2: item.purchaseNum
  }));
};

//数据处理：将用户活跃度与评论数数据转换为组件所需格式
const processActiveData = (data) => {
  if (!Array.isArray(data) || data.length === 0) return [];
  return data.map(item => ({
    name: item.date,
    value1: item.commentNum,
    value2: item.activeUserNum
  }));
};
// 获取数据
const fetchDetail = async () => {
  const response = await myAxios.get('/goodsAdmin/getGData');
  gameList.value = response.data.data;

  onShelfGames.value = gameList.value.filter(game => game.status === 1);
  onShelfGamesLength.value = onShelfGames.value.length;
  offShelfGames.value = gameList.value.filter(game => game.status === 3);
  offShelfGamesLength.value = offShelfGames.value.length;

  if (onShelfGames.value.length > 0) {
    Object.assign(selectedGame, onShelfGames.value[0]);
  }
};

// 切换游戏处理
const handleGameChange = (gid) => {
  const selected = gameList.value.find(game => game.gid === gid);
  Object.assign(selectedGame, selected);

  console.log(selectedGame.active);
};

onMounted(async () => {
  await fetchDetail();
});
</script>


<style lang="less" scoped>
.shell {
  height: calc(100vh - 72px);
  width: 100%;

  .analyse-shell {
    // max-width: 960px;
    margin: 0px auto;
    height: 100%;
    margin-top: 20px;
    width: 960px;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;

    h3 {
      line-height: 30px;
      padding: 10px;
      color: #3b82f6;
    }

    h4 {
      color: white;
      font-size: 22px;
    }

    .analyse-shell-left {
      width: 480px;
      height: 800px;

      .analyse-shell-left-top {
        height: 450px;
        width: 100%;

        .choose {
          color: #3b82f6;
          font-size: 20px;
          font-weight: 600;
          padding: 0;
        }

        .select-con {
          width: 100%;
          height: 50px;
          display: flex;
          justify-content: flex-start;
          padding-left: 10px;
          align-items: center;

          .el-select {
            ::v-deep .el-select__wrapper {
              background-color: #1e293b !important;
              /* 下拉框主体背景色 */
              border-color: #333 !important;
              /* 边框颜色 */
              color: white !important;
              /* 文本颜色 */

              &:focus-within {
                border-color: #3b82f6 !important;
                /* 聚焦时边框颜色 */
              }
            }

            ::v-deep .el-select-dropdown {
              background-color: #1e293b !important;
              /* 下拉菜单背景色 */
              border-color: #333 !important;
              /* 菜单边框颜色 */

              ::v-deep .el-select-dropdown__item {
                color: white !important;
                /* 选项文本颜色 */

                &:hover {
                  background-color: #334155 !important;
                  /* 选项悬停背景色 */
                }

                &.is-selected {
                  color: #3b82f6 !important;
                  /* 选中选项文本颜色 */
                }
              }

              ::v-deep .el-select-dropdown__group-title {
                background-color: #1e293b !important;
                /* 分组标题背景色 */
                color: #94a3b8 !important;
                /* 分组标题文本颜色 */
              }
            }
          }
        }



        .img-container {
          height: 200px;
          width: 360px;
          display: flex;
          justify-content: center;
          margin: 0px;
          padding: 20px;
          padding-bottom: 0;

          .photo {
            object-fit: contain;
            margin: 0px;
            height: 200px;
            width: 340px;
          }
        }

        .info {
          height: 150px;
          display: grid;
          margin: 20px;
          margin-top: 0;
          margin-bottom: 0;
          list-style: none;
          padding-left: 30px;

          .info-item {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr 1fr;
            padding: 10px;
          }
        }
      }

      .analyse-shell-left-bottom {
        height: 300px;
        width: 100%;
      }
    }

    .analyse-shell-right {
      width: 600px;

      .analyse-shell-right-top {
        margin-top: 50px;
        height: 380px;
        width: 100%;
      }

      .analyse-shell-right-bottom {
        width: 100%;
        height: 450px;
      }
    }
  }
}
</style>